<!-- 登录页面视图 - 提供用户登录认证功能 -->
<template>
  <div class="login-container">
    <div class="login-box">
        <!-- 返回按钮 -->
        <button class="back-button" @click="goBack">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="19" y1="12" x2="5" y2="12"></line>
            <polyline points="12 19 5 12 12 5"></polyline>
          </svg>
        </button>

    <div v-if="Tp" class="qiehuanD">

      <h1 class="login-title">MentorX 登录</h1>
      
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-item">
          <label>用户名</label>
          <input 
            v-model="loginForm.username" 
            type="text" 
            placeholder="请输入用户名"
            required
            maxlength="20"
          />
        </div>
        
        <div class="form-item">
          <label>密码</label>
          <input 
            v-model="loginForm.password" 
            type="password" 
            placeholder="请输入密码"
            required
            maxlength="20"
          />
        </div>
        
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>
        
        <button type="submit" class="login-btn" :disabled="loading">
          {{ loading ? '登录中...' : '登录' }}
        </button>
      </form>
      
      <div class="register-link">
        还没有账号？ <a href="#" @click.prevent="showRegister">立即注册</a>
      </div>

    </div>

    <div v-else class="qiehuanZ">

      <h1 class="login-title">MentorX 注册</h1>
      
      <form @submit.prevent="handleRegister" class="login-form">
        <div class="form-item">
          <label>用户名</label>
          <input 
            v-model="registerForm.username" 
            type="text" 
            placeholder="请输入用户名"
            required
            maxlength="20"
          />
        </div>
        
        <div class="form-item">
          <label>密码</label>
          <input 
            v-model="registerForm.password" 
            type="password" 
            placeholder="请输入密码"
            required
            maxlength="20"
          />
        </div>
        
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>
        
        <button type="submit" class="login-btn" :disabled="loading">
          {{ loading ? '注册中...' : '注册' }}
        </button>
      </form>
      
      <div class="register-link">
        已拥有账号？ <a href="#" @click.prevent="showRegister">立即登录</a>
      </div>

    </div>

    </div>
  </div>
</template>









<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login, register, type LoginRequest, type RegisterRequest } from '../api/auth'
import { successMessage, warningMessage, error as showErrorMessage } from '../utls/message'

const Tp = ref(true)

const router = useRouter()

// 返回上一页
const goBack = () => {
  router.push('/')
}

const loginForm = ref<LoginRequest>({
  username: '',
  password: ''
})

// 注册表单数据
const registerForm = ref<RegisterRequest>({
  username: '',
  password: ''
})

const loading = ref(false)
const errorMessage = ref('')

const handleLogin = async () => {
  errorMessage.value = ''
  loading.value = true
  
  try {
    const res = await login(loginForm.value)
    if (res.success) {
      // 保存用户信息
      localStorage.setItem('user', JSON.stringify(res.data))
      // 跳转到Home页面
      router.push('/home')
    } else {
      errorMessage.value = res.message
    }
  } catch (error: any) {
    errorMessage.value = error.message || '登录失败，请稍后再试'
      // 也可以使用我们的错误消息提示
      // showErrorMessage(error.message || '登录失败，请稍后再试')
  } finally {
    loading.value = false
  }
}




































// 使用我们的消息提示组件


















const handleRegister = async () => {
  errorMessage.value = ''
  loading.value = true
  
  try {
    // 调用注册API
    const res = await register(registerForm.value)
    if (res.success) {
      // 注册成功后，直接使用注册信息登录
      const loginRes = await login(registerForm.value)
      if (loginRes.success) {
        // 保存用户信息
        localStorage.setItem('user', JSON.stringify(loginRes.data))
        successMessage('注册成功！正在登录...')
        // 跳转到Home页面
        router.push('/home')
      } else {
        // 自动登录失败，切换到登录页面让用户手动登录
        Tp.value = true
        loginForm.value.username = registerForm.value.username
        loginForm.value.password = registerForm.value.password
        successMessage('注册成功！请手动登录')
      }
      // 清空注册表单
      registerForm.value = { username: '', password: '' }
    } else {
      errorMessage.value = res.message || '注册失败'
    }
  } catch (error: any) {
    errorMessage.value = error.message || '注册失败，请稍后再试'
      // 也可以使用我们的错误消息提示
      // showErrorMessage(error.message || '注册失败，请稍后再试')
  } finally {
    loading.value = false
  }
}

const showRegister = () => {
  Tp.value = !Tp.value  // 切换 true/false
  // 切换时清空错误信息
  errorMessage.value = ''
}
</script>

















<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-box {
  background: white;
  border-radius: 12px;
  padding: 40px;
  width: 400px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  position: relative;

  //border: 5px solid red !important;
}

.back-button {
  position: absolute;
  top: 15px;
  left: 15px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #666;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: #f5f5f5;
  color: #667eea;
}

.back-button:active {
  transform: scale(0.95);
}

.login-title {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  font-size: 28px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item label {
  color: #555;
  font-weight: 500;
}

.form-item input {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-item input:focus {
  outline: none;
  border-color: #667eea;
}

.error-message {
  color: #f56c6c;
  font-size: 14px;
  text-align: center;
  padding: 10px;
  background: #fef0f0;
  border-radius: 6px;
}

.login-btn {
  padding: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s;
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.register-link {
  text-align: center;
  margin-top: 20px;
  color: #666;
  font-size: 14px;
}

.register-link a {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
}

.register-link a:hover {
  text-decoration: underline;
}

.qiehuanD {

  //background: blue;

  width: 100%;
  box-sizing:border-box;
}
</style>